<template>
	<view class="index">
		<view :style="{'height': `${statusBarHeight}px`, 'background-color': '#050033'}"></view>
		<uni-nav-bar backgroundColor="#050033;" color="#FFF" @clickLeft="goBack" left-icon="left"
			:title="$t('index.form-title')" :border="false" />
		<view class="logo">
			<image class="logo-ic" src="@/static/logo.png" alt="" />
			<view class="lang-wrap" @click="changeLanguage">
				<image src="../../static/100.png" mode=""></image>
				<text>{{$t('locale.lang')}}</text>
			</view>
		</view>
		<view class="form">
			<!-- <view class="form-item">
				<view class="title">{{$t('index.text-64')}}</view>
				<view class="form-info" v-html="locale == 'zh' ? eventInfo.desc : eventInfo.e_desc"></view>
			</view>

			<view class="form-item">
				<view class="title">{{$t('index.text-65')}}</view>
				<view class="form-schedule">
					<scroll-view class="scroll-tab" scroll-x="true">
						<view class="tab-item" @click="tapScrollTab(index)" :class="{'select': tabIndex == index}"
							v-for="(item, index) in eventInfo.schedule.date" :key="index">
							{{item}}
						</view>
					</scroll-view>

					<view class="schedule-info">
						<view class="info-item" v-for="(item, index) in eventInfo.schedule.content[tabIndex].morning"
							:key="index">
							<view class="time">
								{{item.time}}
							</view>
							<view class="content" v-html="locale == 'zh' ? item.content : item.content_en"></view>
						</view>
						<view class="info-item" v-for="(item, index) in eventInfo.schedule.content[tabIndex].afternoon"
							:key="index">
							<view class="time">
								{{item.time}}
							</view>
							<view class="content" v-html="locale == 'zh' ? item.content : item.content_en"></view>
						</view>
					</view>
				</view>
			</view> -->

			<view class="form-item">
				<view class="title">{{$t('index.text-1')}}</view>
				<!-- #ifdef MP -->
				<input class="form-input" v-model="hotel" :placeholder="$t('index.text-2')" />
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<input class="form-input" v-model="hotel" disabled :placeholder="$t('index.text-2')" />
				<!-- #endif -->
			</view>

			<view class="form-item">
				<view class="title">{{$t('index.text-3')}}</view>
				<input class="form-input" disabled v-model="hotel_name" :placeholder="$t('index.text-4')" />
			</view>

			<view class="form-item">
				<view class="title">{{$t('index.text-54')}}</view>
				<input class="form-input" v-model="ch_name" :placeholder="$t('index.text-53')" />
			</view>

			<view class="form-item">
				<view class="title">{{$t('index.text-46')}}</view>
				<input class="form-input" v-model="en_name" :placeholder="$t('index.text-5')" />
			</view>

			<view class="form-item blcok">
				<view class="title">{{$t('index.text-6')}}</view>
				<picker class="form-picker" @change="bindDepartChange" :value="departArrayIndex" :range="departArray"
					:range-key="locale == 'zh' ? 'cn_title' : 'eu_title'">
					<view class="uni-input" v-if="depart == ''">{{$t('index.text-7')}}</view>
					<view class="uni-input" v-else>
						{{locale == 'zh' ? departArray[departArrayIndex].cn_title : departArray[departArrayIndex].eu_title}}
					</view>
					<uni-icons type="down" size="18"></uni-icons>
				</picker>
			</view>

			<view class="form-item blcok" v-if="hotel != 'Office' && hotel != 'office'">
				<view class="title">{{$t('index.text-8')}}</view>
				<picker class="form-picker" @change="bindJobChange" :value="jobArrayIndex" :range="jobArray"
					:range-key="locale == 'zh' ? 'cn_title' : 'eu_title'">
					<view class="uni-input" v-if="job == ''">{{$t('index.text-9')}}</view>
					<view class="uni-input" v-else>
						{{locale == 'zh' ? jobArray[jobArrayIndex].cn_title : jobArray[jobArrayIndex].eu_title}}</view>
					<uni-icons type="down" size="18"></uni-icons>
				</picker>
			</view>

			<view class="form-item">
				<view class="title">{{$t('index.text-12')}}</view>
				<input class="form-input" v-model.number="phone" :placeholder="$t('index.text-13')" />
			</view>

			<view class="form-item">
				<view class="title">{{$t('index.text-14')}}</view>
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
						<view>
							<radio :value="item.value" color="#b88d5b" :checked="index === current" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>

			<view class="form-item">
				<view class="title">{{$t('index.text-17')}}</view>
				<input class="form-input" v-model="email" :placeholder="$t('index.text-18')" />
			</view>

			<!-- <view class="form-item">
				<view class="title">{{$t('index.text-19')}}</view>
				<input class="form-input" v-model="name" :placeholder="$t('index.text-20')" />
			</view> -->

			<!-- <view class="form-item" v-if="hotel != 'Office' && hotel != 'office'">
				<view class="title" v-html="$t('index.text-52')"></view>
				<radio-group @change="radioRoomChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in roomItems" :key="item.value">
						<view>
							<radio :value="item.value" color="#b88d5b" :checked="index === roomCurrent" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view> -->

			<!-- <template v-if="is_hotel == 1">
				<view class="form-item">
					<view class="title">{{$t('index.text-61')}}</view>
					<uni-datetime-picker type="date" :clear-icon="false" start="2024-03-17" end="2024-03-22" v-model="stay_start_date" @maskClick="maskClick" />
				</view> 
				
				<view class="form-item">
					<view class="title">{{$t('index.text-62')}}</view>
					<uni-datetime-picker type="date" :clear-icon="false" :start="stay_start_date" end="2024-03-22" v-model="stay_end_date" @maskClick="maskClick" />
				</view>
			</template> -->

			<!-- <view class="form-item" v-if="hotel != 'Office' && hotel != 'office'">
				<view class="title">{{$t('index.text-51')}}</view>
				<uni-datetime-picker v-model="range" :clear-icon="false" start="2024-03-17" end="2024-03-22"
					type="daterange" @maskClick="maskClick" />
			</view> -->

			<!-- <view class="form-item">
				<view class="title">{{$t('index.text-21')}}</view>
				<input class="form-input" disabled v-model="arrive_date" :placeholder="$t('index.text-21')" />
			</view>

			<view class="form-item">
				<view class="title">{{$t('index.text-22')}}</view>
				<input class="form-input" disabled v-model="leave_date" :placeholder="$t('index.text-22')" />
			</view> -->
			<!-- <template v-if="hotel != 'Office' && hotel != 'office' && is_hotel == 1">
				<view class="form-item blcok margin-bottom-10">
					<view class="title">{{$t('index.text-23')}}</view>
					<picker class="form-picker" @change="bindRoomChange" :value="roomArrayIndex" :range="roomArray"
						range-key="name">
						<view class="uni-input">{{roomArray[roomArrayIndex].name || $t('index.text-24')}}</view>
						<uni-icons type="down" size="18"></uni-icons>
					</picker>
				</view>
				<view class="form-item margin-top-0">
					<view class="title">{{locale == 'zh' ? eventInfo.remark : eventInfo.e_remark}}</view>
				</view>
			</template>

			<view class="form-item" v-if="hotel != 'Office' && hotel != 'office' && is_hotel == 1 && eventInfo.is_price == 1">
				<view class="title">{{$t('index.text-57')}}</view>
				<input class="form-input" disabled v-model="stay_price" :placeholder="$t('index.text-57')" />
			</view> -->

			<!-- <view class="form-item margin-bottom-10" v-if="hotel != 'Office' && hotel != 'office'">
				<view class="title">{{$t('index.text-10')}}</view>
				<input class="form-input" disabled v-model="price" :placeholder="$t('index.text-11')" />
			</view> -->

			<!-- <view class="form-item margin-top-0" v-if="hotel != 'Office' && hotel != 'office'">
				<view class="title">{{$t('index.text-66')}}</view>
			</view> -->

			<!-- <view class="form-item" v-if="hotel != 'Office' && hotel != 'office' && eventInfo.is_total_money == 1">
				<view class="title">{{$t('index.text-60')}}</view>
				<input class="form-input" disabled v-model="total_amount" :placeholder="$t('index.text-60')" />
			</view>

			<view class="form-item" v-if="hotel != 'Office' && hotel != 'office'">
				<view class="title">{{$t('index.text-59')}}</view>
				<input class="form-input" v-model="invoice_title" :placeholder="$t('index.text-58')" />
			</view>

			<view class="form-item">
				<view class="title">{{$t('index.text-67')}}</view>
				<radio-group @change="radioSizeChange">
					<label class="uni-list-cell uni-list-cell-pd">
						<view>
							<radio value="M" color="#b88d5b" :checked="'M' === size" />
						</view>
						<view>M</view>
					</label>
					<label class="uni-list-cell uni-list-cell-pd">
						<view>
							<radio value="L" color="#b88d5b" :checked="'L' === size" />
						</view>
						<view>L</view>
					</label>
					<label class="uni-list-cell uni-list-cell-pd">
						<view>
							<radio value="XL" color="#b88d5b" :checked="'XL' === size" />
						</view>
						<view>XL</view>
					</label>
				</radio-group>
			</view> -->

			<view class="form-item">
				<view class="title">{{$t('index.text-25')}}</view>
				<textarea class="form-textarea" v-model="remark" :placeholder="$t('index.text-26')" />
			</view>

			<view class="form-item" v-if="eventInfo.is_exhibition_letter == 1">
				<view class="title">{{$t('index.text-27')}}</view>
				<uni-file-picker limit="1" v-model="imageArr" fileMediatype="image" mode="grid" @select="select"
					@progress="progress" @success="success" @fail="fail" @delete="tapImageDelete" />
			</view>
		</view>
		
		<view class="cue-text">
			<radio @click="tapCheck" value="0" color="#b88d5b" :checked="isCheck" />
			<view @click="goProtocol" v-html="$t('index.text-74')"></view>
		</view>

		<view class="login cancel" @click="tapSend">{{$t('index.text-28')}}</view>
		<!-- <view class="login schedule" @click="tapWeb">{{$t('index.text-63')}}</view> -->
	</view>
</template>

<script>
	import uniNavBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue"
	import uniFilePicker from "@/uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue"
	import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue"
	import uniDatetimePicker from "@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue"
	import {
		checkPhone
	} from '@/utils/validate';
	import utils from '@/utils/util';

	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import {
		user_info,
		sign_info,
		hotels,
		department,
		upload,
		sign_update,
		sign_delete,
		job,
		event_info
	} from "@/api/user";
	let timer = null
	export default {
		components: {
			uniNavBar,
			uniFilePicker,
			uniIcons,
			uniDatetimePicker
		},
		data() {
			return {
				statusBarHeight: 44,
				sign_id: '',
				hotel: '',
				hotel_id: '',
				hotel_name: '',
				ch_name: '',
				en_name: '',
				depart: '',
				job: '',
				price: '',
				phone: '',
				name: '',
				email: '',
				is_hotel: '1',
				stay_start_date: '2024-03-18',
				stay_end_date: '2024-03-20',
				arrive_date: '2024-03-18',
				leave_date: '2024-03-21',
				room_num: 1,
				invoice_title: '',
				remark: '',
				// total_amount: '',
				imageArr: [],
				images: '',
				// items: [{
				// 		value: '1',
				// 		name: this.$t('index.text-15'),
				// 		checked: 'true'
				// 	},
				// 	{
				// 		value: '2',
				// 		name: this.$t('index.text-16')
				// 	}
				// ],
				current: 0,
				roomCurrent: 0,
				departArray: [],
				departArrayIndex: 0,
				jobArray: [],
				jobArrayIndex: 0,
				// roomArray: [{
				// 		id: 1,
				// 		name: '单人间'
				// 	},
				// 	{
				// 		id: 2,
				// 		name: '双人间'
				// 	}
				// ],
				roomArrayIndex: 0,
				sex: 0,

				range: ['2024-03-18', '2024-03-21'],

				eventInfo: {},
				tabIndex: 0,
				size: 'M',
				isCheck: false
			}
		},
		async onLoad(o) {
			let evenId = o.evenId;
			this.evenId = evenId;
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			this.getEventInfo()
			this.getDepartment()
			this.getJob()

			const user = await user_info({
				event_id: evenId,
				user_id: uni.getStorageSync('USERID')
			})
			if (user.code == 200) {
				this.sign_id = user.data.id
				let {
					hotel_id,
					ch_name,
					en_name,
					depart,
					job_id,
					price,
					stay_price,
					phone,
					sex,
					size,
					// name,
					email,
					is_hotel,
					// stay_end_date,
					// stay_start_date,
					arrive_date,
					leave_date,
					room_num,
					remark,
					invoice_title,
					images,
					hotel_info,
					holidex,
					hotel_name
				} = user.data
				this.ch_name = ch_name
				this.en_name = en_name
				this.depart = depart
				this.size = size

				let _departArray = this.departArray
				_departArray.forEach((item, i) => {
					if (item.id == depart) {
						this.departArrayIndex = i;
					}
				})

				this.job = job_id
				this.jobArray.forEach((item, i) => {
					if (item.id == job_id) {
						this.jobArrayIndex = i;
					}
				})
				if(price) {
					this.price = price.toFixed(2)
				}
				// this.stay_price = stay_price
				this.phone = phone
				this.sex = sex
				this.items.forEach((item, i) => {
					if (item.value == sex) {
						this.current = i;
					}
				})

				// this.name = name
				this.email = email
				this.is_hotel = is_hotel
				this.roomItems.forEach((item, i) => {
					if (item.value == is_hotel) {
						this.roomCurrent = i;
					}
				})

				// this.stay_start_date = stay_start_date
				// this.stay_end_date = stay_end_date
				this.arrive_date = arrive_date
				this.leave_date = leave_date
				this.range = [arrive_date, leave_date]
				this.room_num = room_num
				this.roomArray.forEach((item, i) => {
					if (item.id == room_num) {
						this.roomArrayIndex = i;
					}
				})
				this.remark = remark
				this.invoice_title = invoice_title
				this.images = images
				this.imageArr.push({
					name: images,
					extname: 'image',
					url: images
				})
				this.hotel_id = hotel_id
				this.hotel_info = hotel_info
				
				this.hotel = holidex
				this.hotel_name = hotel_name
			}
		},
		watch: {
			// #ifdef MP
			hotel: function(n, o) {
				const t = this
				t.hotel_id = ''
				t.hotel_name = ''
				if (n.length < 5) return
				if (timer != null) clearTimeout(timer)
				timer = setTimeout(() => {
					timer = null
					clearTimeout(timer)
					t.getHolidex()
				}, 500)
			},
			// #endif

			range(newval) {
				this.arrive_date = this.range[0]
				this.leave_date = this.range[1]
			},

			stay_start_date(newval) {
				const startDate = new Date(newval).getTime()
				const endDate = new Date(this.stay_end_date).getTime()
				if (startDate > endDate) {
					let today = new Date(startDate);
					let year = today.getFullYear(); // 获取当前年份
					let month = today.getMonth() + 1; // 获取当前月份（注意：月份从 0 开始计数，所以需要加 1）
					let day = today.getDate(); // 获取当前日（几号）
					let nowTime = `${year}-${month}-${day + 1}`
					this.stay_end_date = nowTime
				}
			}
		},
		computed: {
			locale() {
				return this.$i18n.locale
			},
			items() {
				return [{
						value: '1',
						name: this.$t('index.text-15'),
						checked: 'true'
					},
					{
						value: '2',
						name: this.$t('index.text-16')
					}
				]
			},
			roomItems() {
				return [{
						value: '1',
						name: this.$t('index.text-55'),
						checked: 'true'
					},
					{
						value: '0',
						name: this.$t('index.text-56')
					}
				]
			},
			roomArray() {
				return [{
						id: 1,
						name: this.$t('index.text-47')
					},
					{
						id: 2,
						name: this.$t('index.text-48')
					}
				]
			},
			dateNum() {
				const startDate = this.stay_start_date
				const endDate = this.stay_end_date
				// 包含当天
				return utils.getDaysBetweenDates(startDate, endDate) + 1
			},
			stay_price() {
				let _price = 0,
					{
						room_price,
						double_room_price,
						is_price
					} = this.eventInfo
				if (this.is_hotel == 1 && is_price == 1) {
					if (this.roomArrayIndex == 0) {
						_price = this.dateNum * (room_price * 1)
					} else {
						_price = this.dateNum * (double_room_price * 1)
					}
				}
				return _price.toFixed(2)
			},
			total_amount() {
				let _price = 0,
					{
						room_price,
						double_room_price,
						is_price
					} = this.eventInfo
				if (this.is_hotel == 1 && is_price == 1) {
					if (this.roomArrayIndex == 0) {
						_price = this.dateNum * (room_price * 1) + (this.price * 1)
					} else {
						_price = this.dateNum * (double_room_price * 1) + (this.price * 1)
					}
				} else {
					_price = this.price * 1
				}
				return _price.toFixed(2)
			}
		},
		filters: {
			getNowTime(val) {
				let today = new Date(val * 1000);
				let year = today.getFullYear(); // 获取当前年份
				let month = today.getMonth() + 1; // 获取当前月份（注意：月份从 0 开始计数，所以需要加 1）
				let day = today.getDate(); // 获取当前日（几号）
				let hour = today.getHours(); // 获取当前小时
				let minute = today.getMinutes(); // 获取当前分钟
				let second = today.getSeconds(); // 获取当前秒钟
				if (month < 10) {
					month = `0${month}`
				}
				if (day < 10) {
					day = `0${day}`
				}
				// 格式化输出当前时间
				// let nowTime = year + '/' + month + '/' + day
				let nowTime = month + '-' + day
				return nowTime
			},
		},
		methods: {
			tapCheck() {
				this.isCheck = !this.isCheck
			},
			
			goProtocol() {
				uni.navigateTo({
					url: '/pages/indexBox/protocol'
				})
			},
			
			tapScrollTab(value) {
				this.tabIndex = value
			},

			bindDepartChange(e) {
				const {
					value
				} = e.detail
				this.departArrayIndex = value

				this.depart = this.departArray[value].id
				this.price = this.departArray[value].price
			},

			bindJobChange(e) {
				const {
					value
				} = e.detail
				this.jobArrayIndex = value
				this.job = this.jobArray[value].id
			},

			bindRoomChange(e) {
				const {
					value
				} = e.detail
				this.roomArrayIndex = value
				this.room_num = this.roomArray[value].id
			},

			radioSizeChange(e) {
				const {
					value
				} = e.detail
				this.size = value
			},

			getEventInfo() {
				event_info({
					event_id: this.evenId
				}).then(
					res => {
						this.eventInfo = res.data
					},
					err => {
						console.log(err)
					}
				);
			},
			getJob() {
				job({
					event_id: this.evenId
				}).then(
					res => {
						this.jobArray = res.data
					},
					err => {
						console.log(err)
					}
				);
			},

			tapDelete() {
				const that = this
				uni.showModal({
					title: '提示',
					content: that.$t('index.text-42'),
					cancelText: that.$t('index.cancel'),
					confirmText: that.$t('index.confirm'),
					success(res) {
						if (res.confirm) {
							sign_delete({
								sign_id: that.sign_id
							}).then(
								res => {
									if (res.code == 1) {
										uni.showToast({
											icon: 'none',
											title: that.$t('index.success')
										})
										let _setTimeout = setTimeout(() => {
											clearTimeout(_setTimeout)
											_setTimeout = null
											uni.reLaunch({
												url: '/pages/login/index'
											})
										}, 1500);
									}
								},
								err => {
									console.log(err)
								}
							);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},

			getDepartment() {
				department({
					event_id: this.evenId
				}).then(
					res => {
						this.departArray = res.data
						console.log(res.data)
					},
					err => {
						console.log(err)
					}
				);
			},
			getHolidex() {
				hotels({
					holidex: this.hotel
				}).then(
					res => {
						if (res.data == null) {
							uni.showToast({
								icon: 'none',
								title: this.$t('index.text-41')
							})
							return
						}
						this.hotel_name = res.data.hotel_name
						this.hotel_id = res.data.id
						
						if(this.hotel != 'Office' && this.hotel != 'office') {
							this.price = this.departArray[this.departArrayIndex].price
							this.job = this.jobArray[this.jobArrayIndex].id
						}
						// holidex: "H8310"
						// hotel_name: "Novotel Ningbo East"
						// hotel_name_zh: "宁波逸东诺富特酒店"
					},
					err => {
						console.log(err)
					}
				);
			},
			async tapSend() {
				const that = this
				let data = {
					sign_id: that.sign_id,
					hotel_id: that.hotel_id,
					ch_name: that.ch_name,
					en_name: that.en_name,
					depart: that.depart,
					phone: that.phone,
					sex: that.sex,
					// name: that.name,
					email: that.email,
					remark: that.remark,
					// size: that.size
				}
				
				if(that.hotel != 'Office' && that.hotel != 'office') {
					// data.invoice_title = that.invoice_title
					// data.is_hotel = that.is_hotel
					// data.arrive_date = that.arrive_date
					// data.leave_date = that.leave_date
					// data.room_num = that.room_num
					data.job_id = that.job
					// data.price = that.price
					// if (data.is_hotel == 1) {
					// 	// data.stay_start_date = that.stay_start_date
					// 	// data.stay_end_date = that.stay_end_date
					// 	if (that.eventInfo.is_price == 1) {
					// 		data.stay_price = that.stay_price
					// 	}
					// }
				}

				
				// if (that.eventInfo.is_total_money == 1) {
				// 	data.total_amount = that.total_amount
				// }
				// #ifdef MP
				if (that.hotel != '') {
					const _hotels = await hotels({
						holidex: that.hotel
					})
					if (_hotels.data == null) return uni.showToast({
						icon: 'none',
						title: that.$t('index.text-45')
					})
				}
				if (data.hotel_id == '') return uni.showToast({
					icon: 'none',
					title: that.$t('index.text-2')
				})
				// #endif
				
				if (data.ch_name == '') return uni.showToast({
					icon: 'none',
					title: that.$t('index.text-53')
				})
				if (data.en_name == '') return uni.showToast({
					icon: 'none',
					title: that.$t('index.text-5')
				})
				if (data.depart == '') return uni.showToast({
					icon: 'none',
					title: that.$t('index.text-7')
				})
				if (that.hotel != 'Office' && that.hotel != 'office' && (data.job_id == null || data.job_id == '')) return uni.showToast({
					icon: 'none',
					title: that.$t('index.text-9')
				})
				// if (that.hotel != 'Office' && that.hotel != 'office' && data.price == '') return uni.showToast({
				// 	icon: 'none',
				// 	title: that.$t('index.text-7')
				// })
				if (data.phone == '') return uni.showToast({
					icon: 'none',
					title: that.$t('index.text-13')
				})
				// if (!checkPhone(data.phone)) return uni.showToast({
				// 	icon: 'none',
				// 	title: that.$t('index.text-43')
				// })
				if (data.email == '') return uni.showToast({
					icon: 'none',
					title: that.$t('index.text-18')
				})
				let reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
				if (!reg.test(data.email)) return uni.showToast({
					icon: 'none',
					title: that.$t('index.text-18')
				})
				// if (data.name == '') return uni.showToast({
				// 	icon: 'none',
				// 	title: that.$t('index.text-20')
				// })
				
				// if (that.hotel != 'Office' && that.hotel != 'office' && (data.invoice_title == null || data.invoice_title == '')) return uni.showToast({
				// 	icon: 'none',
				// 	title: that.$t('index.text-58')
				// })

				if (that.eventInfo.is_exhibition_letter == 1) {
					data.images = that.images
					// if (data.images == '') return uni.showToast({
					// 	icon: 'none',
					// 	title: that.$t('index.text-27')
					// })
				}
				
				if(!that.isCheck) {
					return uni.showToast({
						icon: 'none',
						title: that.$t('index.text-75')
					})
				}
				
				uni.showLoading()
				sign_update(data).then(
					res => {
						uni.hideLoading()
						if (res.code == 200) {
							uni.showToast({
								icon: 'none',
								title: that.$t('index.text-32')
							})
							let _setTimeout = setTimeout(() => {
								clearTimeout(_setTimeout)
								_setTimeout = null
								uni.redirectTo({
									url: '/pages/form/success?evenId=' + this.evenId
								})
							}, 1500);
						}
					},
					err => {
						uni.hideLoading()
						console.log(err)
					}
				);
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						this.sex = this.items[i].value
						break;
					}
				}
			},
			radioRoomChange: function(evt) {
				for (let i = 0; i < this.roomItems.length; i++) {
					if (this.roomItems[i].value === evt.detail.value) {
						this.roomCurrent = i;
						this.is_hotel = this.roomItems[i].value
						break;
					}
				}
			},
			// 获取上传状态
			select(e) {
				uni.showLoading({
					title: '图片上传中'
				})
				const that = this
				uni.uploadFile({
					url: HTTP_REQUEST_URL + '/api/event/upload',
					filePath: e.tempFiles[0].url,
					fileType: 'image',
					name: 'file',
					formData: {
						'file': e.tempFiles[0]
					},
					header: {
						// #ifdef MP
						"Content-Type": "multipart/form-data",
						// #endif
						'authorization': `Bearer ${uni.getStorageSync('token')}`
					},
					success: function(res) {
						uni.hideLoading();
						const data = JSON.parse(res.data)
						that.images = HTTP_REQUEST_URL + data.data.url
					},
					fail: function(res) {
						console.log(res)
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '上传图片失败！'
						})
					}
				})

			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},
			// 上传成功
			success(e) {
				console.log('上传成功')
			},
			tapImageDelete(e) {
				this.images = ''
			},
			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			tapWeb() {
				uni.navigateTo({
					url: '/pages/web/index'
				})
			},
			goBack() {
				uni.navigateBack()
			},
			goDownload() {
				uni.navigateTo({
					url: '/pages/form/download?job=' + this.job + '&en_name=' + this.en_name + '&hotel_name=' +
						this.hotel_name
				})
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					uni.setStorageSync('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					uni.setStorageSync('locale', 'zh')
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #050033;
	}

	.index {
		position: relative;
		padding-bottom: 110upx;
		box-sizing: border-box;

		.logo {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20upx 30upx;
			background-color: #050033;

			.logo-ic {
				width: 78upx;
				height: 64upx;
			}

			.lang-wrap {
				display: flex;
				align-items: center;
				color: #fff;
				font-size: 24upx;

				image {
					width: 30upx;
					height: 30upx;
					margin-right: 12upx;
				}
			}
		}

		.form-item {
			margin: 50upx 30upx 60upx;
			font-size: 28upx;

			&.margin-top-0 {
				margin-top: 0;
				color: #666666;
			}

			&.margin-bottom-10 {
				margin-bottom: 10rpx;
			}

			&.blcok {
				position: relative;

				.uni-icons {
					position: absolute;
					top: 71%;
					right: 20upx;
					transform: translate3d(0, -50%, 0);
				}
				
				/* #ifdef H5 */
				.uni-icons {
					top: 50%;
				}
				/* #endif */
			}

			.title {
				margin-bottom: 20upx;
				color: #fff
			}

			.form-input {
				background-color: #fff;
				padding: 20upx;
				border-radius: 8upx;
			}

			.form-textarea {
				width: 100%;
				height: 160upx;
				background-color: #fff;
				padding: 20upx;
				box-sizing: border-box;
				border-radius: 8upx;
			}

			.file-picker__box-content {
				border-style: dashed !important;
				border-color: #ccc !important;
				background-color: #fff;
			}

			.form-info {
				background-color: #fff;
				padding: 20upx;
				border-radius: 8upx;
			}

			.form-picker {
				background-color: #fff;
				padding: 20upx;
				border-radius: 8upx;
			}

			.icon-add {
				width: 40upx;
				height: 2upx;
				background-color: #999999;
			}

			radio-group {
				display: flex;
				align-items: center;

				label {
					display: flex;
					align-items: center;
					margin-right: 110upx;
					font-size: 30upx;
					color: #fff;

					radio {
						margin-right: 12upx;
					}
				}
			}
		}

		.scroll-tab {
			height: 90upx;
			white-space: nowrap;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				left: -30upx;
				bottom: -2upx;
				width: calc(100% + 60upx);
				height: 2upx;
				background-color: #dedddd;
			}

			.tab-item {
				display: inline-block;
				height: 90upx;
				line-height: 90upx;
				padding: 0 20upx;
				text-align: center;
				font-size: 30upx;
				margin-right: 40upx;
				color: #fff;

				&:last-child {
					margin-right: 0;
				}

				&.select {
					color: #d3a86a;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translate3d(-50%, 0, 0);
						width: 72%;
						height: 2upx;
						background-color: #d3a86a;
					}
				}
			}
		}

		.schedule-info {
			.info-item {
				margin-top: 30upx;
				background-color: #fff;
				padding: 28upx 20upx;
				border-radius: 8upx;
				display: flex;
				align-items: center;

				.time {
					width: 84upx;
					font-size: 30upx;
					flex-shrink: 0;
					text-align: center;
					color: #666666;
				}

				.content {
					font-size: 30upx;
					padding-left: 30upx;
					margin-left: 30upx;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translate3d(0, -50%, 0);
						width: 1upx;
						height: 100upx;
						background-color: #ededed;
					}
				}
			}
		}

		.login {
			width: 92%;
			height: 90upx;
			line-height: 90upx;
			text-align: center;
			margin: 0 auto;
			color: #333333;
			font-size: 28upx;
			background-color: #ffffff;
			border-radius: 50upx;
			margin-bottom: 24upx;

			&.edit {
				color: #fff;
				background-color: #050033;
			}

			&.cancel {
				color: #fff;
				background-color: #b88d5b;
			}

			&.schedule {
				color: #fff;
				background-color: #29666d;
			}

			&.login-ic {
				display: flex;
				justify-content: center;
				align-items: center;

				.ic {
					width: 26upx;
					height: 22upx;
					margin-right: 12upx;
				}
			}
		}
	}
	
	.cue-text {
		margin: 40upx 0;
		padding: 0 30upx;
		color: #fff;
		display: flex;
		align-items: center;
		
		radio {
			margin-right: 8upx;
		}
	}
</style>